جلسه هفدهم آموزش iOS: ایجاد چیدمان Grid در iOS ورژن 6

در این جلسه قصد داریم ، به شما نحوه نمایش لیستی از دستور پخت ها را با استفاده از UITableView ، نشان دهیم. به نظر شما ، عالی نیست که بتوانیم دستور پخت ها را در یک ساختار grid view زیبا ، نشان دهیم؟

iOS 6 SDK ، یک کلاس جدید به نام UICollectionView ، معرفی نموده است که به توسعه دهندگان اپ های iOS، این امکان را می دهد که چیدمان grid-like را ایجاد نمایند.

اگر هیچ تصوری از چیدمان grid-like ، در ذهن ندارید ، کافی است نگاهی به اپ داخلی Photos در آیفون ، بیاندازید. این اپ ، عکس های شما را در فرمت grid ، نمایش می دهد. قبل از معرفی این قابلیت به بازار، در ورژن های قبلی iOS ، برنامه نویسان ، مجبور بودند که کدنویسی بسیاری انجام داده و از کتابخانه های دیگری استفاده نمایند ، تا بتوانند اپ مشابه Photos ، را بسازند. UICollectionView ، یکی از تماشایی ترین API ها در iOS 6 ، می باشد ، که نه فقط ، روش مرتب سازی المان های بصری را در چیدمان grid ، ساده می سازد ؛ بلکه  به توسعه دهندگان نیز اجازه می دهد ، چیدمان خود را سفارشی (customize) سازند ، بدون این که نیازی به ایجاد تغییر ، در داده ها داشته باشند (به عنوان مثال، چیدمان دایره ای).

در این آموزش ، یک اپ ساده ، برای نمایش مجموعه ای از عکس های دستور پخت ها ، در چیدمان grid ، خواهیم ساخت. قصد داریم موارد ذیل را تحت پوشش قرار دهیم:

1. مقدمه ای بر UICollectionView.
2. نحوه استفاده از UICollectionView ، برای ساخت یک چیدمان ساده Grid-based.
3. سفارشی سازی Collection Cell Background.

اصول UICollectionView

UICollectionView ، به شیوه ای مشابه با UITableView ، عمل می کند. UITableView ، مجموعه ای از آیتم های داده ای را ، مدیریت کرده و آنها را در یک چیدمان تک ستونی ، نمایش می دهد ؛ در حالی که ، کلاس UICollectionView ، به توسعه دهندگان ، انعطاف پذیری بیشتری در نمایش آیتم ها ، با استفاده از چیدمان های سفارشی ، عرضه می نماید. به طور پیش فرض ، SDK ، با یک کلاس UICollectionViewFlowLayout  ، همراه است که وظیفه آن ، سازماندهی آیتم های داخل grid ، با ویوهای  header و footer  اختیاری برای هر بخش ، می باشد.

کلاس UICollectionView  ، از چندین مؤلفه ، تشکیل شده است:

• سلول ها (Cells) : سلول ها ، نمونه هایی از UICollectionViewCell می باشند. یک سلول ، مانند UITableViewCell ، یک آیتم واحد را در مجموعه ای از داده ها ، نشان می دهد. سلول ها ، عناصر اصلی سازمان دهی شده توسط چیدمان مرتبط  می باشند. اگر چیدمان  UICollectionViewFlowLayout ، مورد استفاده قرار گیرد ، سلول ها ، در فرمت grid-like ، مرتب می شوند.
• Supplementary views – اختیاری. معمولاً برای پیاده سازی ویوهای header و footer بخش ها ، استفاده می شود (در آموزش بعدی ، به این موضوع ، خواهیم پرداخت).
• Decoration views – یکی دیگر از انواع supplementary view ، می باشد ، که فقط برای  اهدف دکوراسیون ، به کار می رود. decoration view ، با data collection ، مرتبط نیست. به سادگی می توانیم ، decoration view را برای افزایش نمای بصری collection view ، ایجاد کنیم (در آموزش بعدی ، به این موضوع ، خواهیم پرداخت).

ساخت اپ ساده با Grid Layout

برای داشتن درک بهتر از نحوه عملکرد UICollectionView ، بیایید دست به کار شویم و یک اپ ساده را بسازیم. Xcode را باز کرده و یک پروژه جدید  با استفاده از تمپلت “Single View application” ، ایجاد می کنیم. نام پروژه را “RecipePhoto” قرار داده و گزینه های “Use Storyboard” و “Use Automatic Reference Count” را فعال می نماییم.

نکته: لطفاً مطمئن شوید که از ورژن Xcode 4.5 یا بالاتر ، برای ایجاد پروژه ، استفاده می کنید.

طراحی Collection View

به Storyboard  رفته و view controller پیش فرض را ، حذف می نماییم. به جای آن ، یک Collection View از Object Library ، اضافه می کنیم.

در بخش “Size Inspector” از Collection View ، می توانیم  ویژگی های مختلف مرتبط با ابعاد را تغییر دهیم. بیایید ، اندازه سلول را به 100 در 100 پیکسل ، تغییر دهیم.

در ادامه ، Collection View Cell را انتخاب کرده و یک شناسه به عنوان “Cell” ، در Attribute Inspector ، تعریف می نماییم.

سپس ، یک Image View به سلول ، اضافه می کنیم. Xcode ، به طور خودکار ، اندازه Image View را تغییر داده و آن را متناسب با اندازه سلول ، قرار می دهد. در “Attribute Inspector” ، تگ value را به 100 برای مراجعات بعدی ، تنظیم می کنیم.

کدنویسی Collection View

در Project Navigator ، کلیک راست کرده و گزینه “New File” را انتخاب می کنیم. یک کلاس جدید که زیر کلاسی از UICollectionViewController  ، می باشد ، ایجاد کرده و نام آن را RecipeCollectionViewController ، قرار می دهیم.

به Storyboard ، برگشته و کلاس ایجاد شده را به عنوان custom class در Collection View Controller ، قرار می دهیم.

همان طور که قبلاً اشاره کردیم ، UICollectionView  ، بسیار مشابه UITableView  عمل می کند. برای پر کردن داده در UITableView ، ما باید دو متد را که در پروتکل UITableViewDataSource  تعریف شده اند ، پیاده سازی کنیم. مشابه UITableView ، پروتکل UICollectionViewDataSource  ، متدهای data source را برای فراهم کردن داده های collection view ، تعریف می کند. حداقل کاری که باید انجام دهیم ، این است که ، باید متدهای collectionView:numberOfItemsInSection: و collectionView:cellForItemAtIndexPath:  را پیاده سازی نماییم.

ابتدا  بیایید سراغ کدنویسی کلاس RecipeCollectionViewController ، برویم. بسته عکس را از download this image pack ، دانلود می کنیم. آن را از حالت فشرده خارج کرده و تمام عکس ها را به پروژه Xcode ، اضافه می کنیم.

در فایل RecipeCollectionViewController.m ، یک آرایه  برای فایل های تصاویر ، تعریف می نماییم.

@interface RecipeCollectionViewController () {
    NSArray *recipePhotos;
}

و آن را در متد viewDidLoad ، مقداردهی اولیه  می کنیم.

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // Initialize recipe image array
    recipeImages = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"egg_benedict.jpg", @"full_breakfast.jpg", @"green_tea.jpg", @"ham_and_cheese_panini.jpg", @"ham_and_egg_sandwich.jpg", @"hamburger.jpg", @"instant_noodle_with_egg.jpg", @"japanese_noodle_with_pork.jpg", @"mushroom_risotto.jpg", @"noodle_with_bbq_pork.jpg", @"starbucks_coffee.jpg", @"thai_shrimp_cake.jpg", @"vegetable_curry.jpg", @"white_chocolate_donut.jpg", nil];
 
}

سپس  دو متد ضروری پروتکل UICollectionViewDataSource را ، پیاده سازی می نماییم.

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return recipeImages.count;
}
 
 
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"Cell";
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    
    UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
    recipeImageView.image = [UIImage imageNamed:[recipeImages objectAtIndex:indexPath.row]];
    
    return cell;
}

متد collectionView:numberOfItemsInSection: method ، تعداد تصاویر دستور پخت را باز می گرداند. متد cellForItemAtIndexPath: method ، داده مربوط به سلول های collection view را فراهم می کند. ابتدا ، یک cell identifier (شناسه سلولی)، تعریف می کنیم ، و سپس  از collectionView  درخواست می کنیم ، یک reusable cell را با استفاده از reuse identifier  از صف خارج نماید. در iOS 6 ، نیازی نیست که سلول ، به صورت دستی  ایجاد شود. متد dequeueReusableCellWithReuseIdentifier: method ، به طور خودکار یک سلول را ایجاد می کند ، یا یک سلول را از صف re-use  باز می گرداند. در نهایت ، image view را با استفاده از  تگ value ، به دست گرفته و آن را به یک تصویر دستور پخت  اختصاص می دهیم.

اکنون ، اپ را کامپایل کرده و اجرا می نماییم. باید مطابق تصویر زیر ، اپ grid-based photo  عمل کند.

سفارشی سازی Collection Cell Background

به نظر شما ، UICollectionView   عالی نیست؟ با چند خط کد ، می توانیم یک اپ ساده grid-based photo  را بسازیم. اما ، اگر بخواهیم یک picture frame (قاب عکس) ، به اپ خود اضافه کنیم ، چه کار باید انجام دهیم؟ همانند سایر عناصر UI ، طراحی سلول collection view به توسعه دهنده اجازه می دهد که به سادگی background (پس زمینه ) را سفارشی سازی نماید. در واقع ، UICollectionViewCell  ، حاوی سه view مختلف ، شامل background ، selected background و view می باشد.  بهتر است که cell view ها را با استفاده از یک شکل ، تشریح کنیم. به شکل زیر دقت کنید:

• Background view: پس زمینه نمای (view) سلول.
• Selected Background View: پس زمینه مربوط به سلول انتخاب شده  می باشد. هنگامی که کاربر ، سلول را انتخاب می نماید ، Selected Background View بر روی لایه Background View ، قرار می گیرد.
• Content View: بدیهی است که مربوط به محتوای سلول  می باشد.

ما از content view ، برای نمایش تصویر دستور پخت استفاده کرده ایم. از background view ، برای نشان دادن picture frame (قاب عکس) ، استفاده خواهیم کرد. در بسته تصویری که قبلاً ، دانلود کرده ایم ، یک فایل به نام “pic_frame.png” ، وجود دارد  که picture frame  است. اندازه قاب ، 100 در 100 پیکسل است. برای قاب گرفتن عکس دستور پخت ، ابتدا باید  اندازه image view سلول را تغییر داده و موقعیت آن را دوباره مرتب کنیم.

به Storyboard رفته و image view را انتخاب می کنیم. مقدار X را به 5 و مقدار Y را به 8 تنظیم می کنیم. طول و عرض باید به ترتیب به 90 و 72 پیکسل  تغییر یابند.

در متد cellForItemAtIndexPath: method از فایل RecipeCollectionViewController.m ، کد زیر را اضافه می کنیم:

    cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"photo-frame.png"]];

ابتدا تصویر مربوط به قاب عکس را بارگذاری می کنیم و سپس آن را به عنوان پس زمینه سلول ، تنظیم می کنیم.  اکنون ، اپ را دوباره کامپایل کرده و اجرا می نماییم. ظاهر اپ ، باید شبیه تصویر زیر  باشد:

موضوع جلسه بعد چیست؟

عالی بود، موافق هستید؟ به همین دلیل است که اشاره کردیم ، UICollectionView  یکی از افزونه عالی در iOS 6 SDK ، می باشد. در این آموزش ، ما فقط اصول پایه ای و نحوه استفاده از چیدمان پیش فرض grid-based را شرح دادیم (مانند UICollectionViewFlowLayout). با ایجاد چیدمان سفارشی ، می توانیم مجموعه ای از داده ها را در سبکcoverflow  یا حتی یک قالب شیک تر ، سازماندهی کنیم.

در آموزش جلسه بعد ، در مورد decoration view ، supplementary view صحبت خواهیم کرد و نحوه ایجاد یک چیدمان شخصی را نشان خواهیم داد. اگر آموزش اپ دستور پخت را دنبال کرده باشید ، سعی کنید ، اپ را تغییر داده و آن را ، تبدیل به ساختار UICollectionView ، نمایید.